<ion-header>
    <ion-navbar>
        <ion-title style="text-align:center">{{'launcher-backup-import' | translate}}</ion-title>
    </ion-navbar>
</ion-header>

<ion-content no-bounce>
    <div>
        <ion-segment [(ngModel)]="selectedTab" color="primary" (ionChange)="selectTab(selectedTab)">
            <ion-segment-button value="words">
                {{ 'text-mnemonic' | translate }}
            </ion-segment-button>
            <ion-segment-button value="file">
                {{ 'text-from-keystore' | translate }}
            </ion-segment-button>
        </ion-segment>
    </div>

    <div *ngIf="selectedTab == 'file'">

        <div class="kuangTextArea">
            <textarea rows="4" class="backupWalletTextArea" placeholder="{{ 'import-text-keystroe-message' | translate}}" [(ngModel)]="keyStoreContent"></textarea>
        </div>
        <ion-list>
            <ion-item>
                <ion-label stacked>{{ 'addwallet-walletname-title' | translate }}</ion-label>
                <ion-input type="text" placeholder="{{ 'addwallet-walletname-placeholder' | translate }}" [(ngModel)]="importFileObj.name"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label stacked>{{ 'importkeystore-keystorepassword-title' | translate }}</ion-label>
                <ion-input type="password" placeholder="{{ 'importkeystore-optionalpassword-placeholder' | translate }}" [(ngModel)]="importFileObj.backupPassWord"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label stacked>{{ 'unlock-paypassword-title' | translate }}</ion-label>
                <ion-input type="password" placeholder="{{ 'addwallet-paypassword1-placeholder' | translate }}" [(ngModel)]="importFileObj.payPassword"></ion-input>
            </ion-item>
            <ion-item>
                <ion-input type="password" placeholder="{{ 'addwallet-paypassword2-placeholder' | translate }}" [(ngModel)]="importFileObj.rePayPassword"></ion-input>
            </ion-item>
        </ion-list>
    </div>

    <div *ngIf="selectedTab == 'words'">
        <div class="kuangTextArea">
            <textarea class="backupWalletTextArea" placeholder="{{ 'text-mnemonic-format' | translate}}" rows="4" [(ngModel)]="mnemonicObj.mnemonic"></textarea>
        </div>
        <ion-list>
            <ion-item>
                <ion-label stacked>{{ 'addwallet-walletname-title' | translate }}</ion-label>
                <ion-input type="text" placeholder="{{ 'addwallet-walletname-placeholder' | translate }}" [(ngModel)]="mnemonicObj.name"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label stacked>{{ 'unlock-paypassword-title' | translate }}</ion-label>
                <ion-input type="password" placeholder="{{ 'addwallet-paypassword1-placeholder' | translate }}" [(ngModel)]="mnemonicObj.payPassword"></ion-input>
            </ion-item>
            <ion-item>
                <ion-input type="password" placeholder="{{ 'addwallet-paypassword2-placeholder' | translate }}" [(ngModel)]="mnemonicObj.rePayPassword"></ion-input>
            </ion-item>

            <ion-item>
                <ion-label>{{'text-signaddress' | translate }}</ion-label>
                <ion-checkbox [(ngModel)]="mnemonicObj.singleAddress"></ion-checkbox>
            </ion-item>
        </ion-list>

        <ion-item (click)="toggleShowAdvOpts()">
            <ion-label *ngIf="!showAdvOpts">{{'show-advanced-options' | translate}}</ion-label>
            <ion-label *ngIf="showAdvOpts"> {{'hide-advanced-options' | translate}}</ion-label>
        </ion-item>

        <ion-item *ngIf="showAdvOpts">
            <ion-label stacked>{{ 'importmnes-optionalpassword-title' | translate }}</ion-label>
            <ion-input type="password" placeholder="{{ 'importmnes-optionalpassword-placeholder' | translate }}" [(ngModel)]="mnemonicObj.phrasePassword"></ion-input>
        </ion-item>
    </div>
</ion-content>

<ion-footer>
    <button ion-button (click)="onImport()" full>{{ 'confirm' | translate }}</button>
</ion-footer>